<template>
  <div class="dashboard-container">
    <MdEditorV3 v-model="text" :editorId="editorId"/>
    <el-button @click="showT()">ok</el-button>
    <div style="display: flex;">
      <div style="width: 70%">
        <MdPreview :editorId="editorId" :modelValue="text" />
      </div>
      <div style="width: 30%;justify-content: center">
        <MdCatalog :editorId="editorId" :scrollElement="scrollElement"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
import {MdPreview, MdCatalog} from 'md-editor-v3';
import {ref} from 'vue';
import 'md-editor-v3/lib/preview.css';

const text = ref('')
const editorId = ref('editorId')
const scrollElement = document.documentElement;

function showT(){
  alert(text.value)
}
</script>

<style lang="scss" scoped>
.project-preview {
  padding: 2rem;

  .tips-text {
    color: #777;
  }
}
</style>
